<!--
 * @Author: zhangjingyu
 * @Date: 2021-05-17 10:50:21
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2021-05-18 09:50:06
 * @FilePath: \vprisk10.14\src\components\ftp\tableSelect.vue
 * @Description: 列表选择组件
-->
<template>
  <div>
    <el-input
      v-model.trim="sName"
      maxlength="40"
      :placeholder="name||placeholder"
      @input="searchElementField"
      @click.native = "showPop"
      @blur="hidePop"
    ></el-input>
    <el-popover
      ref="popoverElement"
      placement="bottom"
      width="300"
      trigger="manual"
      v-model="contentShow"
      @show="selectElementField"
    >
      <el-table
        ref="tableSelect"
        :data="tableData"
        style="width: 100%;overflow:auto;"
        @row-click="authorizeElementFieldFor"
      >
        <el-table-column v-for="item in tableHead" :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
    </el-popover>
    <!-- <div  v-popover:popoverElement class="selectBox" @click="selectElementField"></div> -->
    <div v-popover:popoverElement class="selectBox" @click="showPop"></div>
  </div>
</template>

<script>
export default {
    name:'table-select',
  props: {
      value:String,
    data: {
      type: Array,
      default: () => []
    },
    // 编码字段
    fieldCode:String,
    // 名称字段
    fieldName:String,
    // 表头配置
    tableHead:{
         type: Array,
      default: () => []
    },
    placeholder:{
      type: String,
      default: "请输入关键字"
    }
  },
  model:{
      prop:'value',
      event:'selectChange'
  },
  data() {
    return {
      tableData: [],
      contentShow: false,
      sValue:this.value,
      sName:"",//用来搜索的name
      name:"",//选择后的name暂存
    };
  },
  watch:{
      value(n){
          this.sValue = n;
          this.showNameByValue()
          this.$emit('change',n)
      },
    sValue(n){
        this.$emit('selectChange',n)
    }
  },
  mounted(){
      this.showNameByValue()
  },
  methods: {
      // 回显
      showNameByValue(){
          if(!this.value){
            this.name = '',this.sName = ''
              return} ; 
           this.name = this.data.find(v=>v[this.fieldCode]===this.value)[this.fieldName]
        //    this.name = this.$getLabel(this.value,this.data,this.fieldCode,this.fieldName)
          this.syncName()
      },
    searchElementField() {
      let search = this.sName;
      this.tableData = [];
      this.data.filter(item => { 
        if (
          item[this.fieldCode].indexOf(search) != -1 ||
          item[this.fieldName].indexOf(search) != -1
        ) {
          this.tableData.push(item);
        }
      });
      if (!this.contentShow) {
        this.contentShow = true;
      }
    },
    showPop(){
        this.sName = ''
        this.contentShow  = !this.contentShow
    },
    hidePop(){
        this.contentShow  = false
      this.syncName()
    },
    syncName(){
        // 同步
             this.sName=this.name
    },
     authorizeElementFieldFor(row){
         if(!this.fieldCode||!this.fieldName)return;
      this.sValue = row[this.fieldCode];
      this.name = row[this.fieldName];
      this.contentShow = false;
      this.syncName()
      setTimeout(()=>{
      console.log(this.value)

      },80)
    },
     //业务元素选择
    selectElementField () {
      this.tableData = JSON.parse(JSON.stringify(this.data));
    },
  }
};
</script>

<style lang="scss" scoped>
.selectBox {
  background: url("~@/assets/images/select_btn.gif");
  background-repeat: no-repeat;
  height: 26px;
  width: 23px;
  position: absolute;
  right: 0;
  top: 5px;
  cursor: pointer;
}
/deep/.el-popover {
  max-height: 160px;
  overflow: auto;
}
</style>